// src/routes/index.tsx
import React, { lazy, Suspense, FC } from "react";
import { useRoutes, Navigate } from "react-router-dom";
import { HomeOutlined, PlusCircleOutlined, AndroidOutlined } from "@ant-design/icons";
import type { XRoutes } from "./types";

import {
  Layout,
  EmptyLayout,
  // CompLayout
} from "../layouts";
import Loading from "@comps/Loading";

import Translation from "@comps/Translation";

const Login = lazy(() => import("@pages/login"));
const Dashboard = lazy(() => import("@pages/dashboard"));
const NotFound = lazy(() => import("@pages/404"));
const HospitalList = lazy(() => import('@pages/hospital/hospitalList'))  //引入医院列表路由
const HospitalSet = lazy(() => import('@pages/hospital/hospitalSet'))    //引入医院设置路由
const AddOrUpdateHosSet = lazy(() => import("@pages/hospital/hospitalSet/addOrUpdateHosSet.ts")) //引入添加或者修改医院路由
const HospitalShow = lazy(() => import("@pages/hospital/hospitalList/hospitalShow"))//引入医院详情
const HospitalSchedule = lazy(() => import("@pages/hospital/hospitalList/hospitalSchedule")) //医院排班

//商品管理组件
const Trademark = lazy(() => import("@/pages/product/trademark"))
const Attr = lazy(() => import("@/pages/product/attr"))

const load = (Comp: FC) => {
  return (
    // 因为路由懒加载，组件需要一段网络请求时间才能加载并渲染
    // 在组件还未渲染时，fallback就生效，来渲染一个加载进度条效果
    // 当组件渲染完成时，fallback就失效了
    <Suspense fallback={<Loading />}>
      {/* 所有lazy的组件必须包裹Suspense组件，才能实现功能 */}
      <Comp />
    </Suspense>
  );
};

const routes: XRoutes = [
  {
    path: "/",
    element: <EmptyLayout />,
    children: [
      {
        path: "login",
        element: load(Login),
      },
    ],
  },
  {
    path: "/syt",
    element: <Layout />,
    children: [
      {
        path: "/syt/dashboard",
        meta: { icon: <HomeOutlined />, title: <Translation>route:dashboard</Translation> },
        element: load(Dashboard),
      },
      //医院管理
      {
        path: "/syt/hospatil",
        meta: { icon: <PlusCircleOutlined />, title: "医院管理" },
        element: <EmptyLayout />,
        children: [
          //医院列表路由
          {
            path: "/syt/hospatil/hospatilList",
            meta: { title: "医院列表" },
            element: load(HospitalList),
          },
          //医院列表中医院详情路由
          {
            path: "/syt/hospatil/hospatildetail/:id",
            meta: { title: "医院详情" },
            hidden: true,  //隐藏侧边栏
            element: load(HospitalShow),
          },
          //医院列表中医院排班路由
          {
            path: "/syt/hospatil/hospatilschedule/:hoscode",
            meta: { title: "医院排班" },
            hidden: true,  //隐藏侧边栏
            element: load(HospitalSchedule),
          },

          //医院列表中医院设置路由
          {
            path: "/syt/hospatil/hospatilSet",
            meta: { title: "医院设置" },
            element: load(HospitalSet),
          },
          //医院设置中添加医院路由
          {
            path: "/syt/hospatil/addHospital",
            meta: { title: "添加医院" },
            hidden: true, //隐藏侧边栏
            element: load(AddOrUpdateHosSet),  //组件复用
          },
          //医院设置中修改医院路由
          {
            path: "/syt/hospatil/updateHospital/:id",
            meta: { title: "修改医院" },
            hidden: true, //隐藏侧边栏
            element: load(AddOrUpdateHosSet),  //组件复用
          },
        ]
      },

      //商品管理
      {
        path: "/syt/product",
        meta: { icon: <AndroidOutlined />, title: "商品管理" },
        element: <EmptyLayout />,
        children: [
          //品牌管理
          {
            path: "/syt/product/trademark",
            meta: { title: "品牌管理" },
            element: load(Trademark),
          },
          //平台属性管理
          {
            path: "/syt/product/attr",
            meta: { title: "平台属性管理" },
            element: load(Attr),
          },

        ]
      },
    ],
  },

  {
    path: "/404",
    element: load(NotFound),
  },
  {
    path: "*",
    element: <Navigate to="/404" />,
  },
];

// 渲染路由
// 注意：首字母必须大写
export const RenderRoutes = () => {
  // react-router-dom的新增语法。不用自己遍历了，它帮我们遍历生成
  return useRoutes(routes);
};

// 找到要渲染成左侧菜单的路由
export const findSideBarRoutes = () => {
  const currentIndex = routes.findIndex((route) => route.path === "/syt");
  return routes[currentIndex].children as XRoutes;
};

export default routes;
